<template>
  <div class="search">
    <div class="status box" v-if="type===1">
      <p>姓名：</p>
      <template>
        <el-input v-model="name"></el-input>
      </template>
    </div>
    <div class="status box" v-if="type===2">
      <p>车牌：</p>
      <template>
        <el-input v-model="licensePlate"></el-input>
      </template>
      <p class="car">车型：</p>
      <template>
        <el-input v-model="carType"></el-input>
      </template>
    </div>
    <div class="status box" v-if="type===3">
      <p>优惠卷名称：</p>
      <template>
        <el-input v-model="couponName"></el-input>
      </template>
    </div>
    <div class="box">
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <el-button type="primary" class="putOut" @click='add'>新增</el-button>
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      keyWords: '',
      name: '',
      flag: false,
      licensePlate: '',
      carType: '',
      couponName: ''
    }
  },
  created () {
    console.log(this.type)
  },
  methods: {
    search () {
      if (this.type === 1) {
        this.$emit('search', this.name)
      } else if (this.type === 2) {
        console.log(this.licensePlate, this.carType)
        this.$emit('search', {
          licensePlate: this.licensePlate,
          type: this.carType
        })
      } else if (this.type === 3) {
        this.$emit('search', {
          title: this.couponName
        })
      }
    },
    add () {
      this.flag = true
      this.$emit('add', this.flag)
    }
  }
}

</script>

<style scoped lang='scss'>
.search{
  width: 50%;
  height: 100px;
  margin: 0px;
  display: flex;
  align-items: center;
}
.box{
  display: flex;
  margin-right: 30px;
  p{
    width: 150px;
    line-height: 10px;
  }
}
/deep/.putOut{
  margin-left: 50px;
}
.car{
  margin-left: 10px;
}
</style>
